<template>
	<div id="app">
		<router-view></router-view>
		<router-link to="/">
			<div class="shadow top"><div>仝老师的小灶</div></div>
		</router-link>

		<router-link v-for="(column, index) in columnList" :to="'/column/' + column.id" v-bind:key="index">
			<transition appear name="leftT" v-if="index < columnList.length - 1">
				<div class="tapBoxLeft" v-bind:style="{ top: 130 + index * 140 + 'px', left: column.y + 'px' }" @mouseover="mouseOver(column)" @mouseleave="mouseLeave(column)">
					<div class="tap left">
						<span>{{ column.title }}</span>
					</div>
					<div class="tap right"><img :src="column.imgURL" /></div>
				</div>
			</transition>
			<transition appear name="rightT" v-else>
				<div class="tapBoxRight" v-bind:style="{ right: column.y + 'px' }"  @mouseover="mouseOver(column)" @mouseleave="mouseLeave(column)">
					<div class="tap right" style="left:auto;right:-13px;"><img :src="column.imgURL"/></div>
					<div class="tap left">
						<span>{{ column.title }}</span>
					</div>
				</div>
			</transition>
		</router-link>

		<div class="bg"><img src="./assets/indexBG.jpg" /></div>

		<div class="shadow bottom"><div>©2020 ttl.gzdonkey.com</div></div>
	</div>
</template>

<script>
import TWEEN from '@tweenjs/tween.js';
var yMin=-250;
var yMax=-20;
var yTemp=-50;
export default {
	name: 'app',
	components: {
		// HelloWorld
	},
	data() {
		return {
			columnList: [],
			columnId: '',
			tweeningValue: 0
		};
	},
	watch: {
		// 如果路由有变化，会再次执行该方法
		$route: 'refresh'
	},
	created() {
		this.requestMy({
			url: '/columns',
			method: 'get',
			params: {
				filter: {
					where: {
						state: 0
					},
					fields: {
						content: false,
						id: true,
						title: true,
						weight: true,
						imgURL: true
					},
					order: 'weight DESC'
				}
			}
		})
			.then(response => {
				console.log(response);
				for (var i in response) {
					response[i].y = yMax;
				}
				this.columnList = response;
			})
			.catch(error => {
				console.log(error);
			});
	},
	methods: {
		refresh() {
			if (this.columnId == this.$route.params.columnId) return;
			this.columnId = this.$route.params.columnId;
			console.log(this.columnId);
			var vm = this;
			var tweeningValueStart = { left: yMax };
			var tweeningValueEnd = { left: yTemp };
			for (var i in vm.columnList) {
				var column=vm.columnList[i]
				if(vm.columnId == undefined){
					columnTween(column,yMax)
				}else if(vm.columnId == column.id){
					columnTween(column,yMax)
				}else{
					columnTween(column,yMin)
				}
			}
			function columnTween(column,to){
				column.tween=new TWEEN.Tween(column)
					.to({ y: to }, 500)
					.start();
			}
			function animate() {
				if (TWEEN.update()) {
					requestAnimationFrame(animate);
				}
			}
			animate()

		},
		mouseOver(column) {
			if(this.columnId == ''||this.columnId == undefined||column.id==this.columnId)return;
			// if(column.y!=yMin)return;
			function animate() {
				if (TWEEN.update()) {
					requestAnimationFrame(animate);
				}
			}
			new TWEEN.Tween(column)
				.to({ y:yTemp}, 200)
				.start();
				animate();
		},
		// 移出
		mouseLeave(column) {
			if(this.columnId == ''||this.columnId == undefined||column.id==this.columnId)return;
			// if(column.y!=yTemp)return;
			function animate() {
				if (TWEEN.update()) {
					requestAnimationFrame(animate);
				}
			}
			new TWEEN.Tween(column)
				.to({ y:yMin}, 200)
				.start();
				animate();
		}
	}
};
</script>

<style>
.bg {
	position: fixed;
	top: 137px;
	margin: auto;
	left: 0;
	right: 0;
	z-index: -100;
}

#app {
	/* background:url("./assets/indexBG.jpg");
		min-height:600px;
		background-repeat:no-repeat;
		background-position:top; */
}

.tapBoxLeft {
	position: fixed;
	left: -20px;
	top: 130px;
}

.tapBoxRight {
	position: fixed;
	right: -20px;
	top: 130px;
}

.tapBoxRight:hover {
	right: -40px;
}

.tap {
	display: inline-block;
	position: relative;
}

.left {
	background-color: white;
	z-index: 11;
	height: 60px;
	width: 260px;
	box-shadow: 0px -15px 10px -12px #d1d1d1, 0px 15px 10px -12px #d1d1d1;
}

.left span {
	font-size: 19px;
	line-height: 60px;
	color: #3c3e42;
}

.right {
	z-index: 10;
	left: -13px;
	top: 32px;
	height: 84px;
	width: 84px;
	border-radius: 42px;
	box-shadow: 0px 0px 21px 0px #d1d1d1;
	background-color: white;
}

.shadow {
	box-shadow: 0px 0px 21px 0px #d1d1d1;
	border-radius: 42px;
	position: fixed;
}

.top {
	width: 315px;
	height: 104px;
	top: -37px;
	margin: auto;
	left: 0;
	right: 0;
	background-color: white;
}

.top div {
	margin-top: 37px;
	font-size: 32px;
	line-height: 67px;
}

.bottom {
	width: 248px;
	height: 104px;
	bottom: -57px;
	margin: auto;
	left: 0;
	right: 0;
	background-color: white;
}

.bottom div {
	font-size: 18px;
	line-height: 46px;
	color: #d1d1d1;
}
a:link {
	color: #3c3e42;
}
/* 未访问链接*/
a:visited {
	color: #3c3e42;
}
/* visited link */
a:hover {
	color: #3c3e42;
}
/* mouse over link */
a:active {
	color: #3c3e42;
}
/* selected link */
a:-webkit-any-link {
	text-decoration: none;
}

#app {
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}

.box {
	width: 1100px;
	margin: 0 auto 0 auto;
	box-shadow: 0px 0px 21px 0px #d1d1d1;
	border-radius: 42px;
	padding: 30px 45px;
	text-align: left;
	font-size: 18px;
	color: #7b7b7b;
	background-color: rgba(255, 255, 255, 0.99);
	/* display:block;
		position: absolute; */
}

.clearFloat {
	clear: both;
}

.column li {
	margin-bottom: 30px;
}

.column ul,
li {
	padding: 0;
	list-style-type: none;
}
.leftT-enter-active,
.leftT-leave-active {
	transition: left 2s;
}
.leftT-enter, .leftT-leave-to /* .fade-leave-active below version 2.1.8 */ {
	left: -400px;
}
.rightT-enter-active,
.rightT-leave-active {
	transition: right 2s;
}
.rightT-enter, .rightT-leave-to /* .fade-leave-active below version 2.1.8 */ {
	right: -400px;
}
</style>
